import {Button, Card, Descriptions, Drawer, DrawerProps, Empty, Input, Space} from "antd";
import React from "react";
import {DeleteOutlined} from "@ant-design/icons";

interface princessListType extends DrawerProps {
  ordered: API.PrincessListApi[]
  showOrdered: API.PrincessListApi[]
  searchLoading: boolean,
  searchInput: string
  handlerClose: (type: string) => void,
  handlerDelPrincess: (item: API.PrincessListApi) => void
  handlerSearchInput: (e: any) => void
  handlerSearchPrincess: () => void
  DrawerProps?: DrawerProps
}

const PrincessListed: React.FC<princessListType> = (
  {
    ordered,
    showOrdered,
    searchLoading,
    searchInput,
    handlerClose,
    handlerDelPrincess,
    handlerSearchInput,
    handlerSearchPrincess,
    ...DrawerProps
  }
) => {
  const { Search } = Input;
  return (
    <Drawer
      {...DrawerProps}
      onClose={() => handlerClose("list")}
      extra={

        <Space>
          <Search
            placeholder="请输入姓名"
            loading={searchLoading}
            enterButton="搜索"
            value={searchInput}
            allowClear
            onInput={(e) => handlerSearchInput(e)}
            onSearch={handlerSearchPrincess}
          />
          {
            ordered.length > 0 &&
            <Button
              type='primary'
            >
              下单
            </Button>
          }
        </Space>
      }
    >
      {
        ordered.length > 0 ?
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
          }}>
            {
              showOrdered.map(order => (
                <Card
                  key={order.id}
                  hoverable
                  style={{width: 310, margin: '0 30px 30px'}}
                  cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"/>}
                  actions={[
                    <Space
                      key="delete"
                      onClick={() => handlerDelPrincess(order)}
                      style={{width: "100%", height: "100%", justifyContent: 'center'}}
                      align="center"
                    >
                      <DeleteOutlined />
                      移除
                    </Space>
                  ]}
                >
                  <Descriptions title={order.name} column={2}>
                    <Descriptions.Item label="年龄">{order.age}</Descriptions.Item>
                    <Descriptions.Item label="性别">{order.gender === 1 ? '男' : '女'}</Descriptions.Item>
                    <Descriptions.Item label="身高">{order.height}</Descriptions.Item>
                    <Descriptions.Item label="体重">{order.weight}</Descriptions.Item>
                    <Descriptions.Item label="胸围">{order.bra}</Descriptions.Item>
                    <Descriptions.Item label="服务时间">{order.service_hours}</Descriptions.Item>
                    <Descriptions.Item label="价格">{order.price}</Descriptions.Item>
                  </Descriptions>
                </Card>
              ))
            }
          </div> : <Empty style={{ marginTop: '20%' }} />
      }
    </Drawer>
  )
}

export default PrincessListed
